<template>
  <div v-loading="loading">
    <!-- 用于查看 和 审核的时候 -->
    <div class="lookDetail">
      <div class="flex item">
        <div class="item_label">学时</div>
        <div>{{ form.studyHour ? form.studyHour : 0 }} 时</div>
      </div>
      <!-- 环节列表 -->
      <div class="steps">
        <el-tabs v-model="stepIndex">
          <el-tab-pane
            v-for="(item, index) in form.ccCourseContentList"
            :key="index"
            :name="index + ''"
          >
            <template v-slot:label>
              <span
                :class="{
                  work_type:
                    item.contentType == 1 ||
                    item.contentType == 3 ||
                    !item.contentType,
                  things_type: item.contentType == 2,
                }"
              >{{
                  item.contentName ? item.contentName : `内容${index + 1}`
                }}</span
              >
            </template>
            <div class="content" v-html="item.description"></div>
            <div
              class="fileTitle"
              v-if="
                item.ccCourseContentFileList &&
                item.ccCourseContentFileList.length > 0
              "
            >
              教学课件:
            </div>
            <div class="flex files" v-if="item.ccCourseContentFileList">
              <div
                class="flex files_file shou"
                @click="openfile(item1.fileUrl, item1.fileName, item1.type)"
                v-for="(item1, index1) in item.ccCourseContentFileList"
                :key="index1"
              >
                <img
                  :src="returnIcon(item1.fileUrl, item1.type)"
                  alt="加载失败"
                  class="icon"
                />
                <div class="overTxt filename">{{ item1.fileName }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 底部按钮用于  -->
    <div class="detailbottom" style="" v-if="form.status==0">
      <!-- 用于添加和编辑 可添加考核和练习 -->
      <div
        @click="routeTo(3, form.practiceId, form.examStatus)"
        v-if="form.practiceId"
        class="btn_practice"
      >
        练习
      </div>
      <!-- 作业------------------------------- -->
      <template v-if="form.homeworkSubmitType == 1">
        <!-- 判断条件：
        1.有作业id（homeworkId）
        2.作业状态【homeworkStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）4.新增状态，退回重做  -->
        <div
          @click="routeTo(6, form.homeworkId, form.homeworkStatus)"
          v-if="
            form.homeworkId &&
            (form.homeworkStatus == 0 ||
              form.homeworkStatus == 2 ||
              form.homeworkStatus == 4)
          "
          class="btn_homework"
        >
          作业
        </div>
      </template>
      <!--  form.homeworkSubmitType==2 小组模式    -->
      <template v-if="form.homeworkSubmitType == 2">
        <!-- 判断条件：
        1.有作业id（homeworkId）
        2.作业状态【homeworkStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）4.新增状态，退回重做
        3.是组长（leaderId）     -->
        <div
          @click="routeTo(6, form.homeworkId, form.homeworkStatus)"
          v-if="
            form.homeworkId &&
            (form.homeworkStatus == 0 ||
              form.homeworkStatus == 2 ||
              form.homeworkStatus == 4) &&
            leaderId == $store.getters.studentId
          "
          class="btn_homework"
        >
          作业
        </div>
        <!-- 判断条件：
        1.有作业id（homeworkId）
        2.作业状态【homeworkStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）4.新增状态，退回重做
        3.不是组长（leaderId）     -->
        <div
          @click="showToast('该作业试卷由组长统一提交!')"
          v-if="
            form.homeworkId &&
            (form.homeworkStatus == 0 ||
              form.homeworkStatus == 2 ||
              form.homeworkStatus == 4) &&
            leaderId != $store.getters.studentId
          "
          class="btn_homework_disabled"
        >
          作业
        </div>
      </template>
      <!-- 判断条件：
      1.有考核id（examId）
      2.考核状态【examStatus】不为0和2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过） 4.新增状态，退回重做    -->
      <div
        @click="routeTo(6, form.homeworkPaperId, 'detial')"
        v-if="
          form.homeworkPaperId &&
          form.homeworkStatus != 0 &&
          form.homeworkStatus != 2 &&
          form.homeworkStatus != 4
        "
        class="btn_homework_result"
      >
        查看作业结果
      </div>
      <!-- 考核------------------------------- -->
      <!--  form.examSubmitType==1 正常模式-->
      <template v-if="form.examSubmitType == 1">
        <!-- 判断条件：
        1.有考核id（examId）
        2.考核状态【examStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）4.新增状态，退回重做  -->
        <div
          @click="routeTo(1, form.examId, form.examStatus)"
          v-if="
            form.examId &&
            (form.examStatus == 0 ||
              form.examStatus == 2 ||
              form.examStatus == 4)
          "
          class="btn_exam"
        >
          考核
        </div>
      </template>
      <!--  form.examSubmitType==2 小组模式    -->
      <template v-if="form.examSubmitType == 2">
        <!-- 判断条件：
        1.有考核id（examId）
        2.考核状态【examStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）4.新增状态，退回重做
        3.是组长（leaderId）     -->
        <div
          @click="routeTo(1, form.examId, form.examStatus)"
          v-if="
            form.examId &&
            (form.examStatus == 0 ||
              form.examStatus == 2 ||
              form.examStatus == 4) &&
            leaderId == $store.getters.studentId
          "
          class="btn_exam"
        >
          考核
        </div>
        <!-- 判断条件：
        1.有考核id（examId）
        2.考核状态【examStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）4.新增状态，退回重做
        3.不是组长（leaderId）     -->
        <div
          @click="showToast('该考核试卷由组长统一提交!')"
          v-if="
            form.examId &&
            (form.examStatus == 0 ||
              form.examStatus == 2 ||
              form.examStatus == 4) &&
            leaderId != $store.getters.studentId
          "
          class="btn_exam_disabled"
        >
          考核
        </div>
      </template>
      <!-- 判断条件：
      1.有考核id（examId）
      2.考核状态【examStatus】不为0和2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过） 4.新增状态，退回重做    -->

      <div
        @click="routeTo(1, form.examPaperId, 'detial')"
        v-if="
          form.examPaperId &&
          form.examStatus != 0 &&
          form.examStatus != 2 &&
          form.examStatus != 4
        "
        class="btn_exam_result"
      >
        查看考核结果
      </div>

      <!-- 判断条件：
        1.examId.有考核id（examId）
        2.考核状态【examStatus】不为0和2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过） 4.新增状态，退回重做
        3.没有examPaperId，说明是老师那边结束课程的
       -->
      <div
        @click="showToast('该作业无试卷，分数为教师手动赋分')"
        v-if="
          form.homeworkId &&
          !form.homeworkPaperId &&
          form.homeworkStatus != 0 &&
          form.homeworkStatus != 2 &&
          form.homeworkStatus != 4
        "
        class="btn_homework_result"
      >
        查看作业结果
      </div>
      <div
        @click="showToast('该考核无试卷，分数为教师手动赋分')"
        v-if="
          form.examId &&
          !form.examPaperId &&
          form.examStatus != 0 &&
          form.examStatus != 2 &&
          form.examStatus != 4
        "
        class="btn_exam_result"
      >
        查看考核结果
      </div>
      <div
        v-if="!form.homeworkId && !form.examId && form.studyStatus == 1"
        @click="finishStudy"
        class="btn_exam_finish"
      >
        学习完成
      </div>
      <img
        v-if="!form.homeworkId && !form.examId && form.studyStatus == 2"
        class="finish_icon"
        src="@/assets/images/courseAdd/finish_icon.png"
        alt="加载失败"
      />
    </div>
    <fileDrawer
      :show.sync="drawer"
      :url="drawerurl"
      :name="drawername"
      :type="drawertype"
      :isHttps="isHttps"
    ></fileDrawer>
  </div>
</template>

<script>
import fileDrawer from '@/components/fileDrawer.vue'

import { returnIcon } from '@/utils/util'
import { getIndexStudyInfo } from '@/api/home'

export default {
  components: { fileDrawer },
  props: {
    type: String,
    selectedContentId: [String, Number],
    //课程md5码，上传oss时用
    dirName: [String, Number],
    //组长id
    leaderId: [String, Number],
    //小组模式还是普通模式  1.普通模式  2.小组模式
    examSubmitType: [String, Number],
    studyRecordId: [String, Number],
    courseStuId: [String, Number]
  },
  data() {
    return {
      isInGroup: false,
      stepIndex: 0,
      isHttps: false,
      loading: false,
      // 文件组件弹框
      drawer: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      returnIcon: function(url, type) {
        return returnIcon(url, type)
      },
      // 表单参数
      //   文件类型 0：3d 1:不是3d
      form: {
        description: '',
        ccCourseContentList: []
      }
    }
  },
  created() {
  },
  beforeDestroy() {
  },
  watch: {
    stepIndex() {
      const videos = document.querySelectorAll('video')
      if (videos && videos.length > 0) {
        videos.forEach((video) => {
          video.pause()
        })
      }
    },
    selectedContentId: {
      handler() {
        this.reset()
        this.getInfo()
      },
      immediate: true
    }
  },
  methods: {
    showToast(text) {
      this.$modal.msgWarning(text)
    },
    finishStudy() {
      this.$confirm('是否完成学习？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$emit('finishStudy', this.selectedContentId)
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    routeTo(type, id, state) {
      localStorage.setItem('dirName', this.dirName)
      //查看考核详情
      if (state == 'detial') {
        this.$router.push({
          path: '/examDetail',
          query: { type: type, id: id }
        })
        return
      }
      //进行中直接考试
      if (state == 2) {
        this.$router.push({
          path: '/answerExam',
          query: { type: type, id: id, studyRecordId: this.studyRecordId }
        })
      }
      // 未开始
      else {
        console.log(
          type,
          this.form,
          this.isInGroup,
          type == 1,
          this.form.examSubmitType == 2 ||
          (this.form.examSubmitType == 1 && this.form.leaderPercentage > 0)
        )
        if (
          type == 1 &&
          !this.isInGroup &&
          (this.form.examSubmitType == 2 ||
            (this.form.examSubmitType == 1 && this.form.leaderPercentage > 0))
        ) {
          this.$modal.msgWarning(
            '教师创建分组后可进行考核，请联系授课教师处理!'
          )
          return
        }

        if (
          type == 6 &&
          !this.isInGroup &&
          (this.form.homeworkSubmitType == 2 ||
            (this.form.homeworkSubmitType == 1 &&
              this.form.homeworkLeaderPercentage > 0))
        ) {
          this.$modal.msgWarning(
            '教师创建分组后可进行作业，请联系授课教师处理!'
          )
          return
        }
        this.$router.push({
          path: '/onlineAssessment',
          query: { type: type, id: id, studyRecordId: this.studyRecordId }
        })
      }
    },
    // 打开文件
    openfile(url, name, type) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (type == '1') {
        this.isHttps = false
        if (arr.indexOf(uploadType) > -1) {
          this.drawer = true
          this.drawerurl = url
          this.drawername = name
          this.drawertype = type
        } else {
          window.open(url, '_blank')
        }
      } else {
        this.drawer = true
        this.isHttps = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = type
      }
    },
    // 初始化组件数据
    reset() {
      this.form = {
        description: '',
        ccCourseContentList: []
      }
      this.resetForm('form')
    },
    //获取内容层信息
    async getInfo() {
      this.loading = true
      let res = await getIndexStudyInfo(
        this.courseStuId,
        this.selectedContentId
      )
      const { code, data, status } = res
      if (code == 200) {
        if (!status) {
          this.$modal.msgWarning(data)
          return
        }
        this.isInGroup = res.isInGroup
        data.isInGroup = res.isInGroup
        this.$emit('sendContentInfo', data)
        this.form = data
        this.$emit('getinfo', this.form)
        this.loading = false
        let arr = []
        if (data.contentList && data.contentList.length > 0) {
          for (const courseContentItem of data.contentList) {
            let obj = {
              ...courseContentItem,
              showEdit: false
            }
            arr.push(obj)
          }
        }
        this.form.ccCourseContentList = arr
        this.$emit('updateExamStatus', data.examStatus)
      }
    },
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped lang="scss">
.detailbottom {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .btn_practice {
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fead22;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
  }

  .btn_homework {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    background: #4e8dff;
  }

  .btn_homework_disabled {
    margin-left: 20px;
    user-select: none;
    cursor: not-allowed;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    background: #4e8dff;
  }

  .btn_homework_result {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 120px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4e8dff;
    line-height: 40px;
    background: rgba($color: #4e8dff, $alpha: 0.1);
    border: 1px solid #4e8dff;
  }

  .btn_exam {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    background: #fa6400;
  }

  .btn_exam_disabled {
    margin-left: 20px;
    user-select: none;
    cursor: not-allowed;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    background: #fa6400;
  }

  .btn_exam_result {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 120px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fa6400;
    line-height: 40px;
    background: rgba($color: #fa6400, $alpha: 0.1);
    border: 1px solid #fa6400;
  }

  .btn_exam_finish {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    line-height: 40px;
    background: #28b28b;
  }

  .btn_exam_finish:active {
    background: #28b28b;
    color: #ffffff;
  }

  // 作业
  .btn_homework {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    background: #4e8dff;
  }

  .btn_homework_disabled {
    margin-left: 20px;
    user-select: none;
    cursor: not-allowed;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #fff;
    line-height: 40px;
    background: #4e8dff;
  }

  .btn_homework_result {
    margin-left: 20px;
    user-select: none;
    cursor: pointer;
    width: 120px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4e8dff;
    line-height: 40px;
    background: rgba($color: #4e8dff, $alpha: 0.1);
    border: 1px solid #4e8dff;
  }

  .finish_icon {
    width: 70px;
    height: auto;
    margin-left: 20px;
  }

  .examBtn:hover {
    .del {
      display: block;
    }
  }

  .examBtn {
    padding: 0 16px;
    margin-left: 16px;
    align-items: center;
    text-align: center;
    height: 32px;
    background: #e8fbff;
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #4e8dff;

    .activeIcon {
      display: none;
    }

    .icon {
      display: none;
    }

    .del {
      display: none;
      width: 14px;
      height: 14px;
      top: -4px;
      right: -4px;
    }
  }

  .noExamBtn:hover {
    color: #28b28b;

    .activeIcon {
      display: block;
    }

    .icon {
      display: none;
    }
  }

  .noExamBtn {
    margin-left: 16px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    align-items: center;
    height: 32px;
    background: #f5f6f7;
    padding: 0 10px;

    .activeIcon {
      display: none;
      margin-right: 6px;
      width: 12px;
      height: 12px;
    }

    .icon {
      display: block;
      margin-right: 6px;
      width: 12px;
      height: 12px;
    }

    .del {
      display: none;
      width: 14px;
      height: 14px;
    }
  }
}

.lookDetail {
  width: 880px;
  padding: 24px 40px 24px 40px;
  box-sizing: border-box;
  height: calc(100vh - 260px);
  overflow: auto;

  .item {
    .item_label {
      margin-right: 32px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }

    .item_value {
      width: 696px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }

  .steps {
    margin-top: 24px;

    // ::v-deep .el-tabs__nav-wrap {
    //   padding-left: 24px !important;
    // }

    .content {
      margin-top: 28px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .fileTitle {
      margin-top: 40px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }

    .files {
      .files_file:nth-of-type(3n + 1) {
        margin: 24px 0 0 0;
      }

      .files_file {
        margin: 24px 0 0 98px;

        .icon {
          width: 32px;
          height: 32px;
          margin-right: 16px;
        }

        .filename {
          width: 149px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #333333;
          line-height: 32px;
        }
      }
    }
  }
}

.detail {
  padding-top: 32px;
  padding-bottom: 32px;
  box-sizing: border-box;
  height: calc(100vh - 310px + 77px - 72px);
  overflow: auto;
}

.description {
  margin-left: 48px;

  .label {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    margin: 0 32px 0 0;
  }
}

.stepBox {
  .tabContent {
    padding: 20px 20px 20px 0;

    .addFile {
      width: 135px;
      margin-bottom: 10px;

      img {
        margin: auto 8px auto 0;
        width: 14px;
        height: 14px;
      }

      padding: 0 12px;
      height: 32px;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #ffffff;
      line-height: 32px;
    }
  }

  &_title {
    margin-left: 48px;
    margin-top: 24px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }

  &_tip {
    margin: 4px 0 10px 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #ea3555;
    line-height: 20px;
  }
}

.addStep {
  box-sizing: border-box;

  img {
    width: 20px;
    height: 20px;
    margin: auto 8px auto 0;
  }

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #666666;
}

.card {
  .stepbox_tabs {
    width: 800px;
    margin-top: 35px;
    margin-left: 48px;
  }

  .stepbox_tabs,
  .lookDetail {
    ::v-deep .el-tabs__nav-wrap {
      padding-left: 0 !important;
    }

    ::v-deep .el-tabs__new-tab {
      display: none;
    }

    ::v-deep .el-tabs__item {
      height: 40px !important;
      line-height: 40px !important;
    }

    ::v-deep .el-tabs__item:last-child {
      height: 40px !important;
      line-height: 40px !important;
    }

    ::v-deep .el-tabs__header {
      margin: 0 0 0 0;
    }
  }
}

.addflies {
  margin-bottom: 20px;
}

// 文件列表
.file:hover {
  background: rgba(204, 204, 204, 0.4);

  .del {
    display: block;
  }

  .name {
    color: rgba(39, 196, 120, 1);
  }

  .icon {
    display: none;
  }

  .iconactive {
    display: block;
  }
}

.file {
  width: 275px;
  height: 20px;

  .icon {
    display: block;
    margin: auto 3px auto 3px;
    width: 11px;
    height: 14px;
  }

  .iconactive {
    display: none;
    margin: auto 3px auto 3px;
    width: 11px;
    height: 14px;
  }

  .name {
    width: 240px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(48, 49, 51, 1);
  }

  .del {
    margin: auto 0 auto 0;
    display: none;
    width: 10px;
    height: 10px;
  }
}

::v-deep .el-icon-delete,
::v-deep .el-icon-circle-close {
  font-style: normal;
}

//富文本回显样式
::v-deep h5,
.h5 {
  font-size: 14px;
}

::v-deep h4,
.h4 {
  font-size: 16px;
  font-weight: bold;
}

::v-deep h3,
.h3 {
  font-size: 18px;
  font-weight: bold;
}

::v-deep h2,
.h2 {
  font-size: 20px;
  font-weight: bold;
}

::v-deep h1,
.h1 {
  font-size: 22px;
  font-weight: bold;
}

::v-deep i {
  font-style: italic;
}

::v-deep .w-e-toolbar .w-e-menu i {
  font-style: normal;
}

::v-deep ol {
  list-style-type: decimal;
}

/* ul ol 样式 */
::v-deep ol {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

::v-deep ul {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

/* table 样式 */
::v-deep table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

::v-deep table td,
::v-deep table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
  height: 32px;
}

::v-deep table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
  background-color: #f1f1f1;
}

/* blockquote 样式 */
::v-deep blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  min-height: 24px;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
::v-deep code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

::v-deep pre code {
  display: block;
}

::v-deep a {
  text-decoration: underline;
  color: #5592e5;
}

.contentName {
  width: 100px;
}

//内容  样式start>>>>>>>>>>>>>>>>>>>>>
::v-deep .el-tabs__item.is-top.is-closable {
  padding: 0 !important;
  border-radius: 8px 8px 0 0;
  position: relative !important;
  border: 0;
  margin-right: 4px;

  .el-icon-close {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
  }

  &:hover {
    .work_type + .el-icon-close {
      color: #4e8dff !important;

      &:hover {
        background: #ccdeff !important;
      }
    }

    .things_type + .el-icon-close {
      color: #28b28b !important;

      &:hover {
        background: #aef3df !important;
      }
    }
  }
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}

.work_type {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e4edfe;
  border-radius: 8px 8px 0 0;
  border: 1px solid #ccdeff;
  color: #4e8dff;
  padding: 0 20px;
  box-sizing: border-box;
}

.things_type {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #e4fff7;
  border-radius: 8px 8px 0 0;
  border: 1px solid #aef3df;
  color: #28b28b;
  padding: 0 20px;
  box-sizing: border-box;
}

::v-deep .el-tabs__item.is-active {
  .work_type + .el-icon-close {
    color: #4e8dff !important;
  }

  .things_type + .el-icon-close {
    color: #28b28b !important;
  }

  .work_type {
    background: #ffffff !important;
  }

  .things_type {
    background: #ffffff !important;
  }
}

.work_ipt_type ::v-deep .el-input__inner {
  background: transparent;
}

.work_ipt_type ::v-deep .el-input__inner:focus {
  border-color: #ccdeff !important;
}

.things_ipt_type ::v-deep .el-input__inner {
  background: transparent;
}

.things_ipt_type ::v-deep .el-input__inner:focus {
  border-color: #aef3df !important;
}

::v-deep .el-tabs__active-bar {
  display: none;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
}

::v-deep .el-tabs__item {
  padding: 0;
  margin-right: 4px;
}

//内容  样式end>>>>>>>>>>>>>>>>>>>>>
</style>
